<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg-intro</title>
    <style>
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;

        box-sizing: border-box;
      }

      .svg-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-rows: auto;
        gap: 12px;
        padding: 12px;
      }
    </style>
  </head>
  <body>
    <div class="svg-container">
      <div class="svg-item">
        <p>1. 默认状态</p>
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="background-color: palegreen"
        >
          <rect x="0" y="0" width="100" height="100" fill="pink" />
          <circle cx="50" cy="50" r="50" fill="red" />
        </svg>
      </div>

      <div class="svg-item">
        <p>2. width 和 height</p>
        <svg
          width="300"
          height="150"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="background-color: palegreen"
        >
          <rect x="0" y="0" width="100" height="100" fill="pink" />
          <circle cx="50" cy="50" r="50" fill="red" />
        </svg>
      </div>
      <div class="svg-item">
        <p>3. width、height 和 viewBox 都设置（相同）</p>
        <svg
          width="300"
          height="150"
          viewBox="0 0 300 150"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="background-color: palegreen"
        >
          <rect x="0" y="0" width="100%" height="100%" fill="pink" />
          <circle cx="50" cy="50" r="50" fill="red" />
        </svg>
      </div>
      <div class="svg-item">
        <p>
          4. viewBox（放大和缩小效果）
          <br />
          width 和 height 决定容器实际高度
          <br />
          viewBox 决定了画布显示的内容区域
          <br />
          想象一下：svg 的 width 和 height 就像是
          <strong>一本300宽，150长的书</strong>
          <br />
          而画布就是另一本书，<strong>300宽，150长</strong>，这本书盖在第一本书上
          <br />
          当 viewBox
          宽高小于实际宽高时，就相当于把第二本书拉伸到完全覆盖第一本书<strong
            >（放大效果）</strong
          >
          <br />
          当 viewBox 宽高大于实际宽高时，<strong>则相反（缩小效果）</strong>
          <br />
          viewBox 前面2个值则决定了画布的x轴和y轴偏移量
        </p>
        <svg
          width="300"
          height="150"
          viewBox="0 0 100 100"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="background-color: palegreen"
        >
          <rect x="0" y="0" width="100%" height="100%" fill="pink" />
          <circle cx="50" cy="50" r="50" fill="red" />
        </svg>
      </div>
      <div class="svg-item">
        <p>
          5. preserveAspectRatio="[对齐方式] [缩放模式]"
          <br />
          默认情况下，居中对齐，左右留白，不裁剪 preserveAspectRatio="xMidYMid
          meet"
        </p>
        <ol style="margin-left: 24px">
          <li>none: 不进行强制统一缩放</li>
          <li>
            xMin: viewBox 属性的 X 的最小值与视图的 X 的最小值对齐（强制缩放比）
          </li>
          <li>
            xMid: viewbox 属性的 X 的中点值与视图的 X 的中点值对齐（强制缩放比）
          </li>
          <li>
            xMax: viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X
            的最大值对齐（强制缩放比）
          </li>
          <li>
            YMin: viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐（强制缩放比）
          </li>
          <li>
            YMid: viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐（强制缩放比）
          </li>
          <li>
            YMax: viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐（强制缩放比）
          </li>
        </ol>
        <ol style="margin-left: 24px">
          <li>
            none: 不保持宽高比，直接拉伸或压缩内容以填满容器（可能变形）。
          </li>
          <li>
            meet: 保持宽高比，‌等比例缩放‌内容，确保整个 viewBox
            内容完整显示在容器内，可能会留白
          </li>
          <li>
            slice:
            保持宽高比，‌等比例缩放‌内容，确保内容填满容器，超出部分被裁剪。
          </li>
        </ol>
        <svg
          width="300"
          height="150"
          viewBox="0 0 100 100"
          preserveAspectRatio="xMidYMid meet"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="background-color: palegreen"
        >
          <rect x="0" y="0" width="100%" height="100%" fill="pink" />
          <circle cx="50" cy="50" r="50" fill="red" />
        </svg>
      </div>
    </div>
  </body>
</html>
